<template>
  <div>
    <div class="myshopping_box">
      <div class="myshopping_head">
        <span class="iconfont icon-jiantou-left" @click="$router.go(-1)"></span>
        <p>我的购买</p>
      </div>
      <van-tabs v-model="active" color="#000">
        <van-tab title="全部">
          <div
            class="box"
            v-for="(item, index) in goodsLists"
            :key="index"
            @click="$router.push('completeorder?index=' + index)"
          >
            <div class="left">
              <img :src="item.goods_img" />
            </div>
            <div class="right">
              <p>{{ item.goods_test }}</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div
            class="box"
            v-for="(item, index) in goodsLists"
            :key="index"
            v-show="item.purchase == 1"
            @click="$router.push('completeorder?index=' + index)"
          >
            <div class="left">
              <img :src="item.goods_img" />
            </div>
            <div class="right">
              <p>{{ item.goods_test }}</p>
            </div>
          </div></van-tab
        >
        <van-tab title="待收货">
          <div
            class="box"
            v-for="(item, index) in goodsLists"
            :key="index"
            v-show="item.purchase == 0"
            @click="$router.push('completeorder?index=' + index)"
          >
            <div class="left">
              <img :src="item.goods_img" />
            </div>
            <div class="right">
              <p>{{ item.goods_test }}</p>
            </div>
          </div></van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      active: 0,
      goodsLists: null, //货品清单
    };
  },
  created() {
    //判断是否登录
    let token = sessionStorage.getItem("token");
    if (!token) {
      this.$router.push("login");
    } else {
      console.log(this.$route.query.index);
      this.active = parseInt(this.$route.query.index);
    }

    let goodsLists = JSON.parse(sessionStorage.getItem("goodsLists"));
    if (goodsLists) {
      this.goodsLists = goodsLists;
    }
  },
};
</script>

<style lang="less">
.myshopping_box {
  .myshopping_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
    p {
      display: inline-block;
      padding-left: 33.6%;
    }
  }
  .van-tabs {
    .box {
      background-color: #fff;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      .left {
        img {
          width: 75px;
          height: 75px;
        }
      }
      .right {
        padding-left: 5px;
        p {
          width: 90%;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-size: 12px;
        }
      }
    }
  }
}
</style>